<!-- <pro-header [title]="l('Users')"></pro-header> -->
<nz-card [nzBordered]="false">
    <form nz-form (ngSubmit)="refreshData()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label for="no">用户名</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="q.no" name="no" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="no"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label for="callNo">邮箱地址</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-input [nzSize]="'large'" nzId="callNo"></nz-input>
                    </div>
                </div>
            </div>

            <div nz-col [nzSpan]="8" class="mb-md" [class.text-right]="'true'">
                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" (click)="refreshData()" [nzSize]="'large'" class="mx-sm">重置</button>
                <button nz-button (click)="adduser()" [nzType]="'primary'" [nzSize]="'large'">
                    <i class="anticon anticon-plus"></i>
                    <span>新建</span>
                </button>
            </div>
        </div>
    </form>
    <nz-table #nzTable [nzAjaxData]="data" [nzTotal]="q.total" [(nzPageIndex)]="q.pi" [(nzPageSize)]="q.ps" [nzLoading]="loading"
        [nzShowSizeChanger]="true" (nzPageIndexChange)="refreshData()" (nzPageSizeChange)="refreshData()">
        <thead nz-thead>
            <tr>
                <th nz-th>
                    <span>{{l('UserName')}}</span>
                </th>
                <th nz-th>
                    <span>{{l('FullName')}}</span>
                </th>
                <th nz-th>
                    <span>{{l('EmailAddress')}}</span>
                </th>
                <th nz-th>
                    <span>{{l('IsActive')}}</span>
                    <nz-dropdown [nzTrigger]="'click'">
                        <i class="anticon anticon-filter" nz-dropdown></i>
                        <ul nz-menu>
                            <li nz-menu-item *ngFor="let i of status">
                                <label nz-checkbox [(ngModel)]="i.value">
                                    <span>{{i.text}}</span>
                                </label>
                            </li>
                        </ul>
                        <div nz-table-filter>
                            <span nz-table-filter-confirm (click)="refreshData()">确定</span>
                            <span nz-table-filter-clear (click)="reset(status)">重置</span>
                        </div>
                    </nz-dropdown>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let user of nzTable.data">
                <td nz-td>{{user.userName}}</td>
                <td nz-td>{{user.fullName}}</td>
                <td nz-td>{{user.emailAddress}}</td>
                <td nz-td>
                    <nz-badge [nzStatus]="user.activeType" [nzText]="user.activeText"></nz-badge>
                </td>
                <td nz-td>
                    <a (click)="editUser(user)">编辑</a>
                    <span nz-table-divider></span>
                    <a (click)="msg.success('删除' + user.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>
<edit-user-modal #editUserModal (modalSave)="refreshData()"></edit-user-modal>
<create-user-modal #createUserModal (modalSave)="refreshData()"></create-user-modal>
